<template>
  <div class="page-container">
    <a-tabs v-model:active-key="activeTabkey">
      <a-tab-pane title="订单详情" key="1">
        <etcOrderDetails :orderId="orderId" />
      </a-tab-pane>
      <a-tab-pane title="费用信息" key="2">
        <etcOrderCost :orderId="orderId" />
      </a-tab-pane>
      <a-tab-pane title="续租记录" key="3">
        <reletRecord :orderId="orderId" />
      </a-tab-pane>
      <a-tab-pane title="通行记录" key="4">
        <passRecord :orderId="orderId" />
      </a-tab-pane>
      <a-tab-pane title="操作记录" key="5">
        <OperateLog :id="orderId" type="40" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup name="EtcOrderDetail">
  import etcOrderDetails from './components/etc-order-details.vue'
  import etcOrderCost from './components/etc-order-cost.vue'
  import reletRecord from './components/relet-record.vue'
  import passRecord from './components/pass-record.vue'
  import { ref, watch } from 'vue'
  import { useRoute } from 'vue-router'

  const route = useRoute()
  const routeQuery = route.query
  const orderId = route.params.id
  const activeTabkey = ref('1')

  // 默认选中某个 tab
  watch(
    () => routeQuery.tab,
    (newVal) => {
      if (newVal) activeTabkey.value = routeQuery.tab
    },
    { immediate: true }
  )
</script>

<style lang="less" scoped></style>
